import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import clip from './clip.jsx';
import xx from './xx.jsx';
import styles from './index.module.less';

const Index = (props) => {
  const { className, disable, onChange } = props;

  const floatRef = useRef(null);
  const [style, setStyle] = useState(null);
  const startPointRef = useRef(null);
  const [clipOn, setClipOn] = useState(false);
  const [xywh, setXYWH] = useState(null);

  const onMouseDown = (e) => {
    if (!clipOn) return;
    const { clientX, clientY } = e;
    const { left, top } = floatRef.current.getBoundingClientRect();
    const ll = clientX - left;
    const tt = clientY - top;
    setStyle({ left: ll, top: tt });
    startPointRef.current = { x: clientX, y: clientY };
  };
  const onMouseMove = (e) => {
    if (startPointRef.current) {
      const { clientX, clientY } = e;
      const { x, y } = startPointRef.current;
      const width = clientX - x;
      const height = clientY - y;
      setStyle({ ...style, width: Math.max(width, 20), height: Math.max(height, 20) });
    }
  };
  const onMouseUp = (/* e */) => {
    // const { clientX, clientY } = e;
    startPointRef.current = null;
    if (!style) return;
    const { offsetWidth: w1, offsetHeight: h1 } = floatRef.current;
    const { left: l2, width: w2, height: h2, top: t2 } = style;
    const xs = [l2 / w1, (l2 + (w2 || 20)) / w1];
    const ys = [t2 / h1, (t2 + (h2 || 20)) / h1];
    onChange({ xs, ys });
    setTimeout(() => {
      setClipOn(false);
      setStyle(null);
    }, 200);
    setXYWH(true);
  };
  const onMouseLeave = () => {
    if (startPointRef.current) {
      onMouseUp();
    }
  };

  useEffect(() => {
    setClipOn(false);
    setStyle(null);
    setXYWH(null);
  }, [disable]);

  return (
    <div
      ref={floatRef}
      className={classnames(styles.float, className)}
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
      onMouseUp={onMouseUp}
      onMouseLeave={onMouseLeave}
      style={clipOn ? { cursor: 'crosshair', pointerEvents: 'all' } : { pointerEvents: 'none' }}
    >
      <div className={styles.rect} style={clipOn ? style : null} />
      <div
        className={styles.clip}
        style={disable ? { opacity: 0.5 } : null}
        onMouseDown={(e) => {
          e.stopPropagation();
        }}
        onClick={() => {
          if (disable) return;
          const next = !clipOn;
          setClipOn(next);
          if (!next) {
            setStyle(null);
          }
        }}
        title="放大"
      >
        {clip(clipOn ? '#3ce5d3' : '#ffffffc0')}
      </div>
      <div
        className={styles.xx}
        style={disable ? { opacity: 0.5 } : null}
        onMouseDown={(e) => {
          e.stopPropagation();
        }}
        onClick={() => {
          if (xywh) {
            setClipOn(false);
            setStyle(null);
            setXYWH(null);
            onChange(null);
          }
        }}
        title="取消"
      >
        {xx}
      </div>
      {xywh ? (
        <div className={styles.hkeye1}>
          {/* <div style={xywh?.style} /> */}
          数据已放大
        </div>
      ) : null}
    </div>
  );
};

Index.defaultProps = {
  className: null,
  disable: false,
  onChange: () => {},
};

Index.propTypes = {
  className: PropTypes.any,
  disable: PropTypes.bool,
  onChange: PropTypes.any,
};

export default Index;
